<template>
  <section>
    <el-table
      :data="body"
      height="450"
      border
      size="mini"
      highlight-current-row
      tooltip-effect="dark"
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
      @row-contextmenu="rowContextmenu"
      style="width: 100%">
      <el-table-column
        type="index">
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        sortable
        show-overflow-tooltip
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total">
    </el-pagination>
  </section>
</template>

<script>
  export default {
    name: "bfTable",
    data() {
      return {
        body: [],
        tableData: [],
        currentPage: 1,
        pageSize: 100,
        pageSizes: [100, 200, 500, 1000]
      }
    },
    mounted() {
      this.initTableData();
    },
    methods: {
      initTableData() {
        // 生成模拟数据
        let _tableData = [];
        for (let i = 0; i < 2000; i++) {
          _tableData.push({
            date: '2016-05-03',
            name: '王小虎--' + (i + 1),
            address: '上海市普陀区金沙江路 1518 弄'
          })
        }
        this.tableData = Object.assign([], _tableData);
        // 显示第一页数据
        this.showCurrentPageData();
      },
      showCurrentPageData() {
        let start = (this.currentPage - 1) * this.pageSize;
        let end = start + this.pageSize;
        let body = this.tableData.slice(start, end);
        this.body = Object.assign([], body);

        return this.body
      },
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
        this.showCurrentPageData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.showCurrentPageData();
      },
      rowClick(row, event, column) {
      },
      rowDblclick(row, event) {
      },
      rowContextmenu(row, event) {
      },
      rowClick() {
      },
    },
    computed: {
      total() {
        return this.tableData.length;
      }
    }
  }
</script>

<style>
  .el-table .cell {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
